<!DOCTYPE html>
<html>
<head>
    <title>轻量代码提取</title>
    <link href="https://cdn.jsdelivr.net/npm/bulma@0.9.4/css/bulma.min.css" rel="stylesheet">
    <link href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.7.0/styles/github.min.css" rel="stylesheet">
</head>
<body class="p-3">
    <div class="box">
        <h1 class="title is-4">网站代码提取</h1>
        <input id="url" class="input mb-2" placeholder="输入URL">
        <button id="fetch" class="button is-primary">提取</button>
        <pre class="mt-3"><code id="output" class="language-html"></code></pre>
    </div>

    <script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.7.0/highlight.min.js"></script>
    <script>
    document.getElementById('fetch').onclick = async () => {
        const url = document.getElementById('url').value;
        if(!url) return alert('请输入URL');
        
        try {
            const res = await fetch(`https://api.allorigins.win/raw?url=${encodeURIComponent(url)}`);
            const html = await res.text();
            
            // 提取内联样式和脚本
            const doc = new DOMParser().parseFromString(html, 'text/html');
            const styles = [...doc.querySelectorAll('style')].map(s => s.textContent).join('\n');
            const scripts = [...doc.querySelectorAll('script:not([src])')].map(s => s.textContent).join('\n');
            
            const output = `/* HTML */\n${html}\n\n/* 内联CSS */\n${styles}\n\n/* 内联JS */\n${scripts}`;
            document.getElementById('output').textContent = output;
            hljs.highlightAll();
        } catch(e) {
            alert('提取失败: ' + e.message);
        }
    };
    </script>
</body>
</html>